window.onload = () => {
  new Vue({
    el: '#app',
    data: {
      value: 15
    },
    methods: {
      change(value) {
        this.value = value;
      }
    },
    mounted() {
      setTimeout(() => {
        setInterval(() => {
          this.value += 20;
        }, 800)
      }, 1000)
    },
    //组件
    components: {
      'xc-progress': {
        template: '#xcprogress',
        props: {
          value: {
            type: Number,
            default: 0
          }
        },
        watch: {
          value(newVal) {
            if (newVal > 100) {
              this.value = 100
            } else if (newVal < 0) {
              this.value = 0
            }
            //触发 change 事件
            this.$emit('change', this.value);
          }
        }

      }
    }
  })
}
